<template>
    <view>
        <block v-if="isAdmin">
            <!-- parse <include src="../../../admin/meet/time/admin_meet_time_form_tpl.wxml"/> -->
            <block>
                <view :class="'main-' + oprt">
                    <view class="select-date">
                        <cmpt-calendar
                            mode="multi"
                            :hasDays="hasDays"
                            :hasJoinDays="hasJoinDays"
                            :multiDoDay="multiDoDay"
                            :fold="false"
                            :selectTimeout="false"
                            @click="bindDataCalendarClickCmpt"
                        />
                    </view>

                    <view v-if="days.length" class="data-hint">
                        <text>
                            时段设置
                            <text class="text-grey text-day">(共{{ days.length + lastHasDays.length }}天可约)</text>
                        </text>
                    </view>

                    <view v-else class="data-hint">
                        <text>
                            时段设置：
                            <text class="text-orange text-day">请先选择以上日期</text>
                        </text>
                    </view>

                    <view class="form-area">
                        <view class="form-box" v-for="(item, index) in days" :key="index">
                            <view class="time-group">
                                <view class="time-title">
                                    <text>{{ item.dayDesc }}</text>
                                    <text @tap="bindDaySetTap" :data-idx="index" class="icon-moreandroid"></text>
                                </view>
                                <view @tap="bindTimeAddTap" :data-idx="index" v-if="item.times.length == 0" class="time-line text-orange time-line-hint">
                                    <text class="icon-info margin-right-xs"></text>
                                    尚未添加时段，请设置
                                </view>
                                <view class="time-line" v-for="(timesItem, timesIndex) in item.times" :key="timesIndex">
                                    <text v-if="timesItem.stat.succCnt" class="x-lock icon-profilefill text-grey margin-right-xs"></text>

                                    <cmpt-picker
                                        :disabled="timesItem.stat.succCnt"
                                        disabledHint="该时段已有用户预约，处于锁定状态，不可更改起止时间点（上限人数可更改）"
                                        :steps="2"
                                        :isSlot="true"
                                        :sourceData="daysTimeOptions"
                                        @select="bindDaysTimeStartCmpt($event, { idx: index, timesidx: timesIndex })"
                                        :itemMulti="[tools.split(timesItem.start, ':')[0], tools.split(timesItem.start, ':')[1]]"
                                        :data-idx="index"
                                        :data-timesidx="timesIndex"
                                    >
                                        <view class="clock box">
                                            {{ timesItem.start }}
                                            <text class="icon-right text-arrow"></text>
                                        </view>
                                    </cmpt-picker>

                                    <view class="clock-line">～</view>

                                    <cmpt-picker
                                        :disabled="timesItem.stat.succCnt"
                                        disabledHint="该时段已有用户预约，处于锁定状态，不可更改起止时间点（上限人数可更改）"
                                        :steps="2"
                                        :isSlot="true"
                                        :sourceData="daysTimeOptions"
                                        @select="bindDaysTimeEndCmpt($event, { idx: index, timesidx: timesIndex })"
                                        :itemMulti="[tools.split(timesItem.end, ':')[0], tools.split(timesItem.end, ':')[1]]"
                                        :data-idx="index"
                                        :data-timesidx="timesIndex"
                                    >
                                        <view class="clock box">
                                            {{ timesItem.end }}
                                            <text class="icon-right text-arrow"></text>
                                        </view>
                                    </cmpt-picker>

                                    <view class="limit box" @tap="bindShowTimeLimitModalTap" :data-idx="index" :data-timesidx="timesIndex">
                                        {{ !timesItem.isLimit ? '不限人数' : timesItem.limit + '人' }}
                                        <text class="icon-right"></text>
                                    </view>

                                    <view class="box close" @tap="bindTimeDelTap" :data-idx="index" :data-timesidx="timesIndex" :data-mark="timesItem.mark">
                                        <text class="icon-delete"></text>
                                    </view>

                                    <switch
                                        @tap="bindTimeStatusSwitch"
                                        :disabled="true"
                                        :data-idx="index"
                                        :data-timesidx="timesIndex"
                                        class="limit-status green sm"
                                        :checked="timesItem.status == 1"
                                    ></switch>
                                </view>
                                <view class="time-oprt">
                                    <view class="op" @tap="bindTimeAddTap" :data-idx="index">
                                        <text class="icon-add margin-right-xxs"></text>
                                        添加时段
                                    </view>
                                    <view class="vline"></view>
                                    <view class="op" @tap="bindShowTimeLimitModalTap" :data-idx="index" :data-timesidx="-1">
                                        <text class="icon-friend margin-right-xxs"></text>
                                        人数上限
                                    </view>
                                    <!-- <view class="vline"></view>
                                    <view class="op" @tap="bindTimeSetTap" :data-idx="index">
                                        <text class="icon-copy margin-right-xxs"></text>
                                        复制/模板
                                    </view> -->
                                </view>
                            </view>
                        </view>
                    </view>
                </view>

                <view :class="'btn-bottom-' + oprt">
                    <view @tap="url" data-type="back" class="return">不保存,返回</view>
                    <view @tap="bindSaveTap" class="save">保存时间设置</view>
                </view>

                <cmpt-modal v-if="curTimeLimitModalShow" :show.sync="curTimeLimitModalShow" type="dialog" title="时段人数上限" @click="bindTimeLimitSetCmpt" class="modal-form">
                    <view v-if="curTimesIdx > -1" class="modal-desc text-blue">
                        {{ days[curIdx].day }} {{ days[curIdx].times[curTimesIdx].start }}～{{ days[curIdx].times[curTimesIdx].end }} 可约人数上限为
                    </view>
                    <view v-else class="modal-desc">{{ days[curIdx].day }} 全天 可约人数上限为</view>

                    <view class="form-group">
                        <view class="title">是否限制人数</view>
                        <switch v-if="curTimeIsLimit" @change="switchModel" data-item="curTimeIsLimit" class="green sm" :checked="true"></switch>
                        <switch v-else-if="!curTimeIsLimit" @change="switchModel" data-item="curTimeIsLimit" class="green sm"></switch>
                    </view>
                    <view class="form-group">
                        <view class="title">人数上限</view>
                        <block v-if="curTimeIsLimit">
                            <input type="number" maxlength="4" placeholder="请输入本时段人数上限" v-model="curTimeLimit" class="text-red margin-right-xs" />
                            人
                        </block>
                        <text v-else>不限制人数</text>
                    </view>
                </cmpt-modal>

                <cmpt-modal
                    v-if="saveTempModalShow"
                    :show.sync="saveTempModalShow"
                    type="dialog"
                    title="保存为模板"
                    @click="bindSaveTempCmpt"
                    class="modal-form"
                    :subtitle="'将当前该日期下的配置的 「' + days[curIdx].times.length + '项」 时段保存为模板，以便于后续快速调用 :'"
                    subtitleAlign="left"
                >
                    <view class="form-group">
                        <input maxlength="20" placeholder="请输入模板名称" v-model="formTempName" class="input-temp" />
                    </view>
                </cmpt-modal>

                <!-- top begin -->
                <button v-if="topShow" class="btn-fixed bg-gray text-gray btn-top" @tap="bindTopTap" style="bottom: 160rpx"><text class="icon-top"></text></button>
                <!-- top END. -->

                <cmpt-modal
                    v-if="cancelModalShow"
                    :show.sync="cancelModalShow"
                    type="dialog"
                    title="取消该时段所有预约"
                    @click="bindCancelMeetJoinCmpt"
                    class="modal-form"
                    cancelText="返回"
                    confirmText="确定取消"
                >
                    <view class="form-group" style="padding: 0 10rpx">
                        <view class="title">
                            取消理由
                            <text class="text-grey text-mid">(选填)</text>
                            ：
                        </view>
                        <view @tap="bindClearReasonTap" style="width: 150rpx; text-align: right" class="text-grey">
                            <text class="icon-roundclose"></text>
                            清空
                        </view>
                    </view>

                    <view class="form-group cancel-area">
                        <textarea
                            placeholder-class="phc"
                            placeholder="请输入取消理由 (非必填)，将通知给用户"
                            style="height: 110rpx"
                            v-model="formReason"
                            maxlength="100"
                        ></textarea>
                    </view>
                </cmpt-modal>
            </block>
        </block>
    </view>
</template>
<script module="tools" lang="wxs" src="@/tpls/wxs/tools.wxs"></script>
<script>
import cmptPickerMulti from '@/cmpts/public/picker_multi/picker_multi_cmpt';
import cmptCalendar from '@/cmpts/public/calendar/calendar_meet/calendar_meet_cmpt';
const AdminBiz = require('@/utils/comm/biz/admin_biz.js');
const behavior = require('@/utils/meet/admin_meet_time_bh.js');
export default {
    components: {
        cmptPickerMulti,
        cmptCalendar
    },
    data() {
        return {
            isAdmin: false,
            oprt: 'admin',
            hasDays: [],
            hasJoinDays: [],
            multiDoDay: '',
            days: [],
            lastHasDays: [],
            timesIndex: 0,

            timesItem: {
                stat: {
                    succCnt: ''
                },

                mark: '',
                status: 0
            },

            daysTimeOptions: [],
            curTimeLimitModalShow: '',
            curTimesIdx: 0,
            day: '',
            start: '',
            times: '',
            end: '',
            curTimeIsLimit: '',
            curTimeLimit: '',
            saveTempModalShow: '',
            formTempName: '',
            topShow: 0,
            cancelModalShow: '',
            formReason: ''
        };
    },
    mixins: [behavior],
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: async function (options) {
        if (!AdminBiz.isAdmin(this)) {
            return;
        }
        this._init();
    },
    methods: {
    
    }
};
</script>
<style>
@import './admin_meet_time.css';
</style>
